<script>
/**
 * total - 总的记录数
 * pageSize -每页的记录数
 * curPage - 当前页
 * showInfo - 是否显示页数信息
 */
export default {
  props: ["total", "pageSize", "curPage", "showInfo"],
  emits: ["geto"],
  data() {
    return {
      pageNum: 0,
    };
  },
  methods: {
    goto(page) {
      this.$emit("goto", page);
    },
  },
  mounted() {
    this.pageNum = Math.ceil(this.total / this.pageSize);
  },
  updated() {
    this.pageNum = Math.ceil(this.total / this.pageSize);
  },
};
</script>

<template>
  <div class="pagination">
    <div class="prev">
      <a
        :class="{ disabled: curPage <= 1 }"
        href="javascript:void(0)"
        @click="goto(curPage - 1)"
        >&lt;</a
      >
    </div>
    <div
      class="pages"
      :class="{ 'cur-page': curPage === page }"
      v-for="page in pageNum"
      :key="page"
    >
      <a href="javascript:void(0)" @click="goto(page)">{{ page }}</a>
    </div>
    <div class="next">
      <a
        :class="{ disabled: curPage >= pageNum }"
        href="javascript:void(0)"
        @click="goto(curPage + 1)"
        >&gt;</a
      >
    </div>
    <div v-if="showInfo">
      总{{ total }}条，第{{ curPage }}页 / 共{{ pageNum }}页
    </div>
  </div>
</template>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
}

.prev,
.next,
.pages {
  display: inline-block;
  font-style: 12px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  box-sizing: border-box;
  margin: 0 4px;
  background-color: rgba(240, 242, 245, 0.9);
  border-radius: 2px;
}

.pages > a {
  color: rgb(0, 0, 0);
}

.pages > a:hover {
  color: rgb(64, 158, 255);
}

.cur-page {
  background-color: rgb(64, 158, 255);
}
.cur-page > a {
  color: white;
  pointer-events: none;
}
</style>
